<template>
 <el-row>
   <el-col :span="12" :offset="6">
    <el-table
      style="width: 100%"
      max-height="650"
      :data="bookList"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="id" label="id" width="180" />
      <el-table-column prop="title" label="title" width="180" />
      <el-table-column prop="body" label="body" />
      <el-table-column align="right" width="150">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
        </template>
      </el-table-column>
    </el-table>
   </el-col>
 </el-row>
</template>
<script lang="ts">
 import { storeToRefs } from "pinia"
 import { useRouter } from 'vue-router'
 import { MainInterface } from "@/interface"
 import { useMainStore } from "@/store/main"

export default {
  setup() {
    const router = useRouter()
    const { bookList} = storeToRefs(useMainStore())

    const tableRowClassName = ({
      row,
      rowIndex,
    }: {
      row: MainInterface.PostItem[]
      rowIndex: number
    }) => {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    }

    const handleEdit = (_index: number, row: MainInterface.PostItem) => {
      router.push(`/form/${row.id}`)
    }
    
    return {
      bookList,
      tableRowClassName,
      handleEdit
    }
  }
}
</script>
<style scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

</style>